<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "cheche",
      dog:{
        name:'澈澈',
        age:'98'
      }
    };
  },
  // 侦听器,要写到和data平级的 watch里面
  watch: {
    // 1.函数写法
    // uname(newVal,oldVal){
    //   console.log(newVal,oldVal);
    // }
    // 2.对象写法 写成对象写法就是为了加immediate 或deep选项
    uname: {
      handler(newVal, oldVal) {
        //写对象格式 handler必须写死 名字固定
        console.log(newVal, oldVal);
      },
      immediate: true //加入这个选项,表示立即侦听 通俗的说 打开页面就侦听一次 获取初始值
    },
    // dog:{
    //   handler(){
    //     console.log(newVal)
    //   },
    //   deep:true //深度侦听 用于侦听对象的属性变化
    // }
    // 只监听对象的某一个属性
    'dog.age'(newVal){
      console.log(newVal)
    }
  }
}
</script>

<style>
</style>